<template>
	<div class="login_page fillcontain">
		<transition name="form-fade" mode="in-out">
			<section class="form_contianer" v-show="showLogin">
				<div class="manage_tip">
					<p>教务后台管理系统</p>
				</div>
				<el-form :model="teacher" :rules="rules" ref="teacher">
					<el-form-item prop="id">
						<el-input v-model="teacher.id" placeholder="用户名"><span></span></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" placeholder="密码" v-model="teacher.password"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="login()" class="submit_btn">登录</el-button>
					</el-form-item>
				</el-form>
			</section>
		</transition>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	data() {
		return {
			teacher: {
				id: '',
				password: '',
			},
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				],
			},
			showLogin: false,
			student: {}
		}
	},
	mounted() {
		this.showLogin = true;
		// if (!this.adminInfo.id) {
		// 	this.getAdminData()
		// }
	},
	computed: {
		// ...mapState(['adminInfo']),
	},
	methods: {
		login() {
			axios.post(`http://114.116.52.2:8008/teacher/login`, this.teacher).then(res => {
				let code = res.data.code;
				if (code == 200) {
					this.teacher = res.data.data.teacher;
					localStorage.setItem('id', this.teacher.id);
					localStorage.setItem('name', this.teacher.name);
					this.$router.push('/manage');
				}
			})
		},
	},
	watch: {
		adminInfo: function (newValue) {
			if (newValue.id) {
				this.$message({
					type: 'success',
					message: '检测到您之前登录过，将自动登录'
				});
				this.$router.push('manage')
			}
		}
	}
}
</script>

<style lang="less" scoped>
@import '../style/mixin';

.login_page {
	background-color: #324057;
}

.manage_tip {
	position: absolute;
	width: 100%;
	top: -100px;
	left: 0;

	p {
		font-size: 34px;
		color: #fff;
	}
}

.form_contianer {
	.wh(320px, 210px);
	.ctp(320px, 210px);
	padding: 25px;
	border-radius: 5px;
	text-align: center;
	background-color: #fff;

	.submit_btn {
		width: 100%;
		font-size: 16px;
	}
}

.tip {
	font-size: 12px;
	color: red;
}

.form-fade-enter-active,
.form-fade-leave-active {
	transition: all 1s;
}

.form-fade-enter,
.form-fade-leave-active {
	transform: translate3d(0, -50px, 0);
	opacity: 0;
}
</style>
